<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Charge and a Disk</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="450"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Font Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = "italic 24px 'Times New Roman'";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Drawing Parameters ---
const cx = 380; // x-coordinate of the disk's center
const cy = 200; // y-coordinate of the axis
const R = 90;   // Vertical radius of the disk
const ellipseRx = 35; // Horizontal radius of the disk (for perspective)
const b = 220; // Initial distance of the particle from the disk
const chargeX = cx - b;
const chargeY = cy;
const particleRadius = 5;

// --- Helper function to draw an arrow ---
function drawArrow(x1, y1, x2, y2, headlen = 10) {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
}

// --- Main Drawing Logic ---

// 1. Draw the Charged Disk
// Create a hatching pattern for the surface charge
const patternCanvas = document.createElement('canvas');
const patternCtx = patternCanvas.getContext('2d');
patternCanvas.width = 8;
patternCanvas.height = 8;
patternCtx.strokeStyle = 'black';
patternCtx.lineWidth = 0.5;
patternCtx.beginPath();
patternCtx.moveTo(0, 8);
patternCtx.lineTo(8, 0);
patternCtx.stroke();
const hatchPattern = ctx.createPattern(patternCanvas, 'repeat');

// Draw the ellipse representing the disk
ctx.beginPath();
ctx.ellipse(cx, cy, ellipseRx, R, 0, 0, 2 * Math.PI);
ctx.save(); // Save context state before applying pattern
ctx.fillStyle = hatchPattern;
ctx.fill();
ctx.restore(); // Restore to default fill/stroke
ctx.stroke(); // Draw the outline of the ellipse

// 2. Draw the x-axis
// Dashed line part (left of the disk)
ctx.beginPath();
ctx.setLineDash([6, 4]);
ctx.moveTo(chargeX, cy);
ctx.lineTo(cx - ellipseRx, cy);
ctx.stroke();
ctx.setLineDash([]); // Reset to solid line

// Solid line part with arrow (right of the disk)
drawArrow(cx + ellipseRx, cy, cx + 120, cy);
ctx.fillText('x', cx + 135, cy);

// 3. Draw the Point Charge
ctx.beginPath();
ctx.arc(chargeX, chargeY, particleRadius, 0, 2 * Math.PI);
ctx.fill();

// 4. Draw Labels and Vectors
// Charge label '-q'
ctx.fillText('-q', chargeX - 25, chargeY);

// Velocity vector 'v₀'
drawArrow(chargeX + 15, chargeY, chargeX + 85, chargeY);
ctx.fillText('v', chargeX + 50, chargeY - 22);
ctx.save();
ctx.font = "italic 16px 'Times New Roman'";
ctx.fillText('0', chargeX + 62, chargeY - 17);
ctx.restore();

// Labels on the disk
// Radius 'R'
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx, cy - R);
ctx.stroke();
ctx.fillText('R', cx + 20, cy - R / 2);

// Center 'O'
ctx.fillText('O', cx - 20, cy + 15);

// Surface charge density 'σ'
ctx.fillText('σ', cx, cy + R / 2 + 10);

// 5. Draw the dimension 'b'
const b_line_y = cy + 150;
const arrowHeadSize = 8;

// Vertical extension lines
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(chargeX, chargeY + particleRadius);
ctx.lineTo(chargeX, b_line_y);
ctx.moveTo(cx, cy + R);
ctx.lineTo(cx, b_line_y);
ctx.stroke();
ctx.restore();

// Horizontal dimension line with arrowheads
ctx.beginPath();
ctx.moveTo(chargeX, b_line_y);
ctx.lineTo(cx, b_line_y);
// Left arrowhead
ctx.moveTo(chargeX + arrowHeadSize, b_line_y - arrowHeadSize / 2);
ctx.lineTo(chargeX, b_line_y);
ctx.lineTo(chargeX + arrowHeadSize, b_line_y + arrowHeadSize / 2);
// Right arrowhead
ctx.moveTo(cx - arrowHeadSize, b_line_y - arrowHeadSize / 2);
ctx.lineTo(cx, b_line_y);
ctx.lineTo(cx - arrowHeadSize, b_line_y + arrowHeadSize / 2);
ctx.stroke();
// Label 'b'
ctx.fillText('b', chargeX + b / 2, b_line_y + 25);

// 6. Add the figure caption
ctx.font = "24px 'SimSun', 'STSong'";
ctx.fillText('题 8 图', canvas.width / 2, canvas.height - 25);

</script>
</body>
</html>